<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/bootstrap.min.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/style.css">
    <!--    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/style.css">-->
    <link rel="stylesheet" th:href="@{/admin/assets/vendor/fonts/fontawesome/css/fontawesome-all.css}">
    <link rel="shortcut icon" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/bitbug_favicon.ico"/>
    <link rel="stylesheet" th:href="@{/admin/assets/vendor/fonts/themify-icons/themify-icons.css}">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index2.css">
    <title>管理后台-你离开了南京，从此没有人和我说话 </title>
</head>
<style>
    [v-cloak] {
        display: none
    }

    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
</style>
<body>
<div id="app" v-cloak>
    <el-container>
        <el-aside width="200px">
            <div class="nav-left-sidebar sidebar-dark">
                <div class="menu-list">
                    <nav class="navbar navbar-expand-lg navbar-light">
                        <a class="d-xl-none d-lg-none" href="#">Dashboard</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav flex-column">
                                <li class="nav-divider">
                                    你离开了南京，从此没有人和我说话
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link " href="main.html" target="right"><i
                                            class=" fas fa-bowling-ball"></i>首页 </a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link " href="article-edit.html" target="right"><i
                                            class=" fas fa-eye-dropper"></i>写博客 </a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link " href="main-table.html" target="right"><i
                                            class="  fas fa-file-alt"></i>博客管理</a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link " href="tags-table.html" target="right"><i
                                            class=" fas fa-bookmark"></i>标签管理</a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link " href="classification-table.html" target="right"><i
                                            class="fas fa-book"></i>文集管理</a>
                                </li>
                                <li class="nav-item " @click="click">
                                    <a class="nav-link " href="comment-table.html" target="right"><i
                                            class=" ti-themify-favicon-alt"></i>评论管理 <!--:style="display"-->
                                        <el-badge :value="commentCount" class="item" type="danger "
                                                  v-show="isShow"></el-badge>
                                    </a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link " href="my-profile.html" target="right"><i
                                            class="ti-github"></i>我的资料</a>
                                </li>

                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </el-aside>
        <el-container>
            <el-header>
                <div class="dashboard-header">
                    <nav class="navbar navbar-expand-lg bg-white fixed-top">
                        <a class="navbar-brand" href="home.html">Blog-yeqian</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse " id="navbarSupportedContent">
                            <ul class="navbar-nav ml-auto navbar-right-top">
                                <li style="    margin-top: 22px">
                                    <span class="status"></span><span class="ml-2">上次登陆时间：{{tableData.recentLogin|dateFormat}}</span>
                                </li>
                                <li class="nav-item dropdown nav-user">
                                    <a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                                            :src="tableData.userAvatar" alt="头像"
                                            class="user-avatar-md rounded-circle"></a>
                                    <div class="dropdown-menu dropdown-menu-right nav-user-dropdown"
                                         aria-labelledby="navbarDropdownMenuLink2">
                                        <div class="nav-user-info" style="background: #ffffff">
                                            <h5 class="dropdown-item" style="color:#000; align-content: center">
                                                {{tableData.nickname}} </h5>
                                        </div>
                                        <!--                                        <a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a>
                                                                                <a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a>-->
                                        <a class="dropdown-item" th:href="@{/logout}"><i
                                                class="fas fa-power-off mr-2"></i>登出</a>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </nav>
                </div>
                管理员 administrator
                普通用户 general
            </el-header>
            <el-container>
                <el-aside width="60px">
                </el-aside>
                </el-header>
                <el-container>
                    <iframe name="right" class="el-main" src="main.html" width="100%" height="800px"
                            frameborder="0"></iframe>
                </el-container>
            </el-container>

            <el-footer>
                <div class="footer" style="  width: 1600px;
    left: 61px;
        border-radius: 4px;
    position: relative;
    margin-top: 6px;">
                    <div class="container-fluid">
                        <div class="row">
                            <a href="https://www.miit.gov.cn/"></a>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                COPYRIGHT © 2020-2021 版权所有 泉眼无声惜细流
                                <a target="_blank">备案号:陕ICP备2020013692号</a>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="text-md-right footer-links d-none d-sm-block">
                                    <a href="javascript: void(0);">前往B站关注我</a>
                                    <a href="javascript: void(0);">我的码云</a>
                                    <a href="javascript: void(0);">个人简历 </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </el-container>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<!--<script th:src="@{/js/index.js}"></script>-->
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            isShow: true,  //false为隐藏，true为显示
            tableData: {},
            commentCount: 0,
        },
        created() {
            axios.post("/admin").then((res) => {
                if (res.data.flag) {
                    this.tableData = res.data.data;
                    this.getCommentCount(this.tableData.id);
                } else {
                    this.$message.error(res.data.message);
                }
            });

        },
        methods: {
            getCommentCount(id) {
                //  console.log(id);
                axios.get("/comment/getUnread/" + this.tableData.id).then((res) => {
                    if (res.data.data <= 0) {
                        this.isShow = false;
                        // this.display='';

                    }
                    this.commentCount = res.data.data;
                });
            },
            click() {
                this.isShow = false;
                console.log(this.display)
            }
        }
        , filters: {
            /**
             * 格式化时间
             * @param time
             * @returns {string}
             */
            dateFormat(time) {
                var publishTime = new Date(time) / 1000,
                    d_seconds,
                    d_minutes,
                    d_hours,
                    d_days,
                    timeNow = parseInt(new Date().getTime() / 1000),
                    d,

                    date = new Date(publishTime * 1000),
                    Y = date.getFullYear(),
                    M = date.getMonth() + 1,
                    D = date.getDate(),
                    H = date.getHours(),
                    m = date.getMinutes(),
                    s = date.getSeconds();
                //小于10的在前面补0
                if (M < 10) {
                    M = '0' + M;
                }
                if (D < 10) {
                    D = '0' + D;
                }
                if (H < 10) {
                    H = '0' + H;
                }
                if (m < 10) {
                    m = '0' + m;
                }
                if (s < 10) {
                    s = '0' + s;
                }

                d = timeNow - publishTime;
                d_days = parseInt(d / 86400);
                d_hours = parseInt(d / 3600);
                d_minutes = parseInt(d / 60);
                d_seconds = parseInt(d);

                if (d_days > 0 && d_days < 3) {
                    return d_days + '天前';
                } else if (d_days <= 0 && d_hours > 0) {
                    return d_hours + '小时前';
                } else if (d_hours <= 0 && d_minutes > 0) {
                    return d_minutes + '分钟前';
                } else if (d_seconds < 60) {
                    if (d_seconds <= 0) {
                        return '刚刚';
                    } else {
                        return d_seconds + '秒前';
                    }
                } else if (d_days >= 3 && d_days < 30) {
                    return M + '-' + D + ' ' + H + ':' + m;
                } else if (d_days >= 30) {
                    return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
                }
            },

        }
    })
</script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/dropdown.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/dropdown-s.js"></script>
</body>
</html>